<template>
    <mu-paper class="paperz" :zDepth="2">
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-select v-model="searchList.search" placeholder="请选择" size="mini" style="width: 90px">
                    <el-option v-for="item in searchs" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="请输入内容" size="mini" v-model="searchList.searchValue"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" @click="searchClick">搜索
                </el-button>
            </el-form-item>
            <el-form-item>
                <el-button size="mini" type="primary" @click="dialogUser = true;addUserType='0'">添加
                </el-button>
            </el-form-item>
        </el-form>
        <el-table ref="userList" :data="tableData" @filter-change="filter" @row-dblclick="expTrue" style="width: 100%;"
                  @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="手机号">
                            <span>{{ props.row.phone }}</span>
                        </el-form-item>
                        <el-form-item label="师傅代号">
                            <span>{{props.row.teacher === '' ? '无':props.row.teacher}}</span>
                        </el-form-item>
                        <el-form-item label="支付宝">
                            <span>{{ props.row.alpay }}</span>
                        </el-form-item>
                        <el-form-item label="微信号">
                            <span>{{ props.row.wechat }}</span>
                        </el-form-item>
                        <el-form-item label="ip">
                            <span>{{ props.row.ip }}</span>
                        </el-form-item>
                        <el-form-item label="注册时间">
                            <span>{{ props.row.addTime |  timeTo(1)}}</span>
                        </el-form-item>
                        <!--<el-form-item label="密码">
                            <span>{{ props.row.password }}</span>
                        </el-form-item>-->
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="id" label="序号" width="70">
            </el-table-column>
            <el-table-column prop="inviter" label="邀请人" width="80">
                <template slot-scope="scope">
                    {{scope.row.inviter === '' ? '无':scope.row.inviter}}
                </template>
            </el-table-column>
            <el-table-column prop="userGroup" label="组别" width="60">
                <!-- <template slot-scope="props">
                     {{props.row.userGroup.toUpperCase()}}组
                 </template>-->
            </el-table-column>
            <el-table-column prop="admin" label="审核人" width="80">
                <template slot-scope="scope">
                    {{scope.row.admin === '' ? '无':scope.row.admin}}
                </template>
            </el-table-column>
            <el-table-column prop="user" label="用户名" width="90">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="80">
            </el-table-column>
            <el-table-column prop="jobs" label="职业" width="80">
            </el-table-column>
            <el-table-column prop="taobao" label="多多号" width="80">
                <template slot-scope="props">
                    <a target="_blank"
                       :href="'http://amos.im.alisoft.com/msg.aw?v=2&uid=' + props.row.taobao + '&site=cntaobao&s=1&charset=utf-8'">{{props.row.taobao}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="qq" label="QQ" width="80">
                <template slot-scope="props">
                    <a :href="'http://wpa.qq.com/msgrd?v=3&uin=' + props.row.qq + '&site=1&menu=yes'" target="_blank">{{props.row.qq}}</a>
                </template>
            </el-table-column>
            <el-table-column prop="role" label="角色" width="50">
                <template slot-scope="scope">
                    {{scope.row.role === '1' ?'师傅':'徒弟'}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="teacher" label="师傅代号" width="80">
                 <template slot-scope="scope">
                     {{scope.row.teacher === '' ? '无':scope.row.teacher}}
                 </template>
             </el-table-column>-->
            <el-table-column prop="adminUser" label="操作员" width="80">

            </el-table-column>
            <el-table-column prop="teacherUser" label="师傅账号" width="80">
                <template slot-scope="scope">
                    {{scope.row.teacherUser === '' ? '无':scope.row.teacherUser}}
                </template>
            </el-table-column>

            <el-table-column prop="money" label="本金" width="70">
                <template slot-scope="scope">
                    {{scope.row.money * 1}}
                </template>
            </el-table-column>
            <el-table-column prop="comMoney" label="佣金" width="70">
                <template slot-scope="scope">
                    {{scope.row.comMoney * 1}}
                </template>
            </el-table-column>
            <!-- <el-table-column prop="freezeMoney" label="冻结本金" width="85">
             </el-table-column>
             <el-table-column prop="freezeComMoney" label="冻结佣金" width="85">
             </el-table-column>-->
            <el-table-column prop="taskEndTime" label="最后任务" width="80">
                <template slot-scope="scope">
                    {{scope.row.taskEndTime | timeTo(0)}}
                </template>
            </el-table-column>

            <el-table-column prop="text" label="备注" width="70">

            </el-table-column>
            <el-table-column prop="city" label="城市" width="90">

            </el-table-column>
            <!-- <el-table-column prop="task3Day" label="3天已做" width="80">
             </el-table-column>
             <el-table-column prop="task30Day" label="30天已做" width="80">
             </el-table-column>-->
            <el-table-column prop="taskStatus" label="任务状态" width="100"
                             :filters="[{ text: '未进行', value: '0' }, { text: '进行中', value: '1' }]"
                             column-key="filterTask" :filter-multiple="filterStatus.task" filter-placement="bottom-end">
                <template slot-scope="scope">
                    <div v-if="scope.row.taskStatus === '0'">
                        未进行
                    </div>
                    <div v-if="scope.row.taskStatus === '1'">
                        进行中
                    </div>
                    <div v-if="scope.row.taskStatus === '2'">
                        待审核
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="userStatus" label="状态" width="100"
                             :filters="[{ text: '待审核', value: '0' }, { text: '正常', value: '1' }, { text: '冻结', value: '2' },{ text: '待操作员审核', value: '99' }]"
                             :filter-multiple="filterStatus.user" column-key="filterUser" filter-placement="bottom-end">
                <template slot-scope="scope">
                    <div v-if="scope.row.userStatus === '0'">
                        <el-button type="text" @click="switchUserStatus(1,scope.row.user)" style="color: #ff1034;">
                            {{scope.row.role ==='1'?'待操作员审核':'待师傅激活'}}
                        </el-button>
                    </div>
                    <div v-if="scope.row.userStatus === '99'">
                        <el-button type="text" @click="switchUserStatus(1,scope.row.user,scope.row.role)"
                                   style="color: #ff1034;">
                            待{{scope.row.adminUser}}审核
                        </el-button>
                    </div>
                    <div v-if="scope.row.userStatus === '1'">
                        <el-button type="text" @click="freeze(2,scope.row.user)">正常</el-button>
                    </div>
                    <div v-if="scope.row.userStatus === '2'">
                        <el-button type="text" @click="freeze(1,scope.row.user)" style="color: red">冻结
                        </el-button>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="160">
                <template slot-scope="scope">
                    <el-button size="mini"
                               @click="dialogUser = true;userInfoList = JSON.parse(JSON.stringify(scope.row));addUserType = scope.row.user;userInfoList.birthday = userInfoList.birthday + '000'">
                        编辑
                    </el-button>
                    <!--<el-button size="mini" type="primary"
                               @click="dedleteUserDialog = true;dedleteUserName = scope.row.user">删除
                    </el-button>-->
                </template>
            </el-table-column>
            <el-table-column
                    prop="activateTime"
                    label="激活日期"
                    width="134"
            >
                <template slot-scope="scope">
                    {{scope.row.activateTime | timeTo(1)}}
                </template>
            </el-table-column>
            <el-table-column prop="city" label="30天接单数" width="90">

            </el-table-column>
            <el-table-column prop="city" label="总单数" width="90">

            </el-table-column>
            <el-table-column prop="city" label="危险等级" width="90">

            </el-table-column>


        </el-table>
        <br/>
        <div v-if="multipleSelection[0]">
            <el-button size="mini" type="primary"
                       @click="setArr('dedlete','','删除')">删除
            </el-button>
        </div>
        <br/>
        <el-pagination
                :page-size="20"
                :current-page="searchList.pn"
                layout="prev, pager, next"
                :total="searchList.total"
                @current-change="pnChange"
                v-if="searchList.total > 20"
        >
        </el-pagination>
        <el-dialog title="添加用户" :visible.sync="dialogUser" custom-class="dedleteUserDialog"
                   @close="userInfoList = userInfoListTemp">
            <el-form ref="form" label-width="100px">

                <el-form-item label="用户名">
                    <el-input auto-complete="off" v-model="userInfoList.user"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input auto-complete="off" v-model="userInfoList.password"></el-input>
                </el-form-item>
                <el-form-item label="微信号">
                    <el-input auto-complete="off" v-model="userInfoList.wechat"></el-input>
                </el-form-item>
                <el-form-item label="支付宝">
                    <el-input auto-complete="off" v-model="userInfoList.alpay"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-radio v-model="userInfoList.role" label="1">师傅</el-radio>
                    <el-radio v-model="userInfoList.role" label="0">徒弟</el-radio>
                </el-form-item>
                <!-- <el-form-item label="师傅ID" v-if="userInfoList.role =='0'">
                     <el-input v-model="userInfoList.master"></el-input>
                 </el-form-item>-->

                <el-form-item label="真实姓名">
                    <el-input auto-complete="off" v-model="userInfoList.name"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio v-model="userInfoList.sex" label="1">女</el-radio>
                    <el-radio v-model="userInfoList.sex" label="0">男</el-radio>
                </el-form-item>
                <el-form-item label="多多号">
                    <el-input auto-complete="off" v-model="userInfoList.taobao"></el-input>
                </el-form-item>
                <el-form-item label="QQ">
                    <el-input auto-complete="off" v-model="userInfoList.qq"></el-input>
                </el-form-item>
                <el-form-item label="手机">
                    <el-input auto-complete="off" v-model="userInfoList.phone"></el-input>
                </el-form-item>
                <el-form-item label="职业">
                    <el-input auto-complete="off" v-model="userInfoList.jobs"></el-input>
                </el-form-item>
                <el-form-item label="生日">

                    <el-date-picker v-model="userInfoList.birthday" type="date" placeholder="选择日期"
                                    value-format="timestamp">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogUser = false">取 消</el-button>
                <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="dedleteUserDialog" title="确认删除?" custom-class="dedleteUserDialog">
            确认删除用户{{dedleteUserName}}?
            <div slot="footer" class="dialog-footer">
                <el-button @click="dedleteUserDialog = false">取 消</el-button>
                <el-button type="primary" @click="dedleteUser">确 定</el-button>
            </div>
        </el-dialog>
    </mu-paper>
</template>

<script>
    export default {
        name: "AdminUser",
        data() {
            return {
                addUserType: "",
                userInfoList: {
                    user: "",
                    sex: "0",
                    name: "",
                    birthday: "",
                    jobs: "",
                    phone: "",
                    wechat: "",
                    alpay: "",
                    taobao: "",
                    role: "1",
                    master: "",
                    money: "",
                    userStatus: "1"
                },
                userInfoListTemp: {},
                tableData: [],
                searchs: [
                    {
                        value: "user",
                        label: "用户名"
                    },
                    {
                        value: "qq",
                        label: "QQ"
                    },
                    {
                        value: "wechat",
                        label: "微信号"
                    },
                    {
                        value: "alpay",
                        label: "支付宝"
                    },
                    {
                        value: "phone",
                        label: "手机号"
                    },
                    {
                        value: "userGroup",
                        label: "组别"
                    },
                    {
                        value: 'teacherUser',
                        label: '师傅账号'
                    }
                ],
                searchList: {
                    search: "user",
                    searchValue: "",
                    filter: {
                        task: "",
                        user: ""
                    },
                    total: 0,
                    pn: 1,
                },
                dialogUser: false,
                dedleteUserName:
                    "",
                dedleteUserDialog:
                    false,
                filterStatus:
                    {
                        user: false,
                        task: false
                    }
                ,
                multipleSelection: [],
            }
                ;
        },
        methods: {
            getUserList() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "getUserList",
                        search: JSON.stringify(_this.searchList)
                    })
                    .then(function (response) {
                        _this.tableData = response.data.data;
                        _this.searchList.total = parseInt(response.data.total);
                    });
            },
            dedleteUser() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "dedleteUser",
                        user: _this.dedleteUserName
                    })
                    .then(function (response) {
                        _this.dedleteUserDialog = false;
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getUserList();
                    });
            },
            filter(value) {
                console.log(value);
                value.filterUser
                    ? (this.searchList.filter.user = value.filterUser[0])
                    : (this.searchList.filter.task = value.filterTask[0]);
                this.getUserList();
            },
            searchClick() {
                this.getUserList();
            },
            freeze(a, b) {
                let title;
                let _this = this;
                a === 1 ? (title = "确认用户 " + b + " 状态更新为正常?") : (title = "确认冻结用户 " + b + "?");
                _this.$confirm(title, "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    _this.$http.post("/api/api.php", {
                        id: "updateUserStatus",
                        user: a,
                        status: 2
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getUserList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });

            },

            switchUserStatus(a, b, c = '') {
                let title;
                let _this = this;
                if (c == '0') {
                    _this.$http.post("/api/api.php", {
                        id: "updateUserStatus",
                        user: b,
                        status: a,
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getUserList();
                    });
                    return;
                }
                _this.$prompt("联系师傅的微信---订单号(购买过我们店铺的订单号,没填罚款50)", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                }).then(({value}) => {
                    console.log(value);
                    if (value === null) {
                        _this.$message({
                            type: 'error',
                            message: '备注不能为空'
                        });
                        return
                    }
                    _this.$http.post("/api/api.php", {
                        id: "updateUserStatus",
                        user: b,
                        status: a,
                        text: value,
                    }).then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.getUserList();
                    });
                }).catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消"
                    });
                });
            },
            setArr(a, b, c) {
                let _this = this;
                _this
                    .$confirm("确认" + c + "?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning"
                    })
                    .then(() => {
                        _this.$http
                            .post("/api/api.php", {
                                id: "setArr",
                                table: 'users',
                                set: a,
                                field: b,
                                arr: JSON.stringify(_this.multipleSelection),
                            })
                            .then(function (response) {
                                _this.$message({
                                    type: response.data.status,
                                    message: response.data.msg
                                });
                                _this.getUserList();
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        });
                    });
            },
            pnChange(pn) {
                this.searchList.pn = pn;
                this.getUserList();
            },
            expTrue(row) {
                this.$refs.userList.toggleRowExpansion(row);
            },
            addUser() {
                let _this = this;
                _this.$http
                    .post("/api/api.php", {
                        id: "addUser",
                        data: JSON.stringify(_this.userInfoList),
                        type: _this.addUserType
                    })
                    .then(function (response) {
                        _this.$message({
                            type: response.data.status,
                            message: response.data.msg
                        });
                        _this.dialogUser = false;
                        _this.getUserList();
                    });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            }
        },
        mounted() {
            this.userInfoListTemp = JSON.parse(JSON.stringify(this.userInfoList));
            this.getUserList();
        }
    };
</script>

<style scoped>
    .paperz {
        height: 90%;
        padding: 15px;
    }

    .demo-table-expand {
        font-size: 0;
        margin-left: 50px;
    }

    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }

    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }

    .dedleteUserDialog {
        width: 450px;
    }

    a {
        color: #606266;
    }
</style>
